import React from 'react'
import Header from '@/components/Layout/Header'
import CCarsousel from '@/components/Layout/Carsousel'
import Footer from '@/components/Layout/Footer'
import { Container,Tabs,Tab } from "@/core"
import "./Home.less"


class Home extends React.Component {

    loadNews = ()=>{
        Promise.all([
            _.api("page.news",{params:{able:1,orderByColumn:"sort",isAsc: "desc"}}),
            _.api("page.page",{params:{"cate":"gsyw",pageSize:6}}),
            _.api("page.page",{params:{"cate":"mtjj",pageSize:6}}),
            _.api("page.page",{params:{"cate":"gzdt",pageSize:6}}),
            _.api("page.page",{params:{"cate":"ywly",pageSize:100}}),
        ]).then(([res,res0,res1,res2,ywlyLi])=>{// 公司要闻 gsyw 媒体聚焦 mtjj 国资动态 gzdt
            this.state.specialList = res.rows;
            this.state.specialList0 = res0.rows;
            this.state.specialList1 = res1.rows;
            this.state.specialList2 = res2.rows;
            //
            if(ywlyLi.rows.length>2){
                this.state.infos = ywlyLi.rows;
            }
            this.forceUpdate();
        })

    }

    loadZtzl(){
        _.api("page.tempZtzl").then((res)=>{
            this.setState({ztzl:res.rows.map((v)=>({pic:global.http(v.pic),content:v.content}))})
        })
    }

    showNews = (offset)=>{
        let news = this.state.specialList;
        let idx = this.state.newsIdx + offset;
        idx < 0 && (idx = news.length - 1);
        idx >= news.length && (idx = 0);
        this.setState({newsIdx:idx})
    }

    showInfo = (item)=>{
        _.his.push(`/con/${item.link||item.slug}`)
    }

    specialTabChange = (key)=>{
        return (e,newValue)=>{
            this.setState({
                [key]:newValue
            })
        }
    }

    nextInfos = (flag)=>{
        let st = this.state;
        let index = st.infosIndex + flag;
        index == -1 && (index = st.infos.length - 3);
        index > (st.infos.length - 3) && (index = 0);
        this.setState({infosIndex: index});
    }

    autoMove = (f)=>{
        if(f){
            _.timeout.set("home",()=>{
                this.showNews(1);
            },5000)
        }else{
            _.timeout.set("home");
        }
    }

    state = {
        newsIdx:0,
        // tab1
        specialTab:0,
        specialList:[],
        specialList0:[],
        specialList1:[],
        specialList2:[],
        // tab2
        specialTab2:0,
        specialList20:[],
        specialList21:[],
        infos:[],
        ztzl:[],
        infosIndex:0,
        navIdx:0,
        navData:[]
    }

    componentDidMount(){
        this.loadNews();
        this.loadZtzl();
        this.autoMove(true);
    }

    renderSpecialTab(){
        let arr = ["企业要闻","媒体聚焦","国资动态"];
        return arr.map((v,i)=>{
            let clz = ["flone","item"];
            if(i == this.state.specialTab){
                clz.push("active");
            }
            return (
                <div key={i} className={clz.join(" ")}>
                    <div onMouseOver={(e)=>this.specialTabChange("specialTab")(e,i)}>{v}</div>
                </div>
            )
        })
    }

    renderList(i,key = "specialList"){
        let list = this.state[key+i];
        return list.map((v,i)=>{
            let title = v.title.replace(/\<.*\/\>/g,'');
            return (
                <div className="item" key={i}>
                    <div className="flr fl-middle" onClick={()=>this.showInfo(v)}>
                        <div className="flbox text">{title}</div>
                        <div className="flone date">[{_.MOMENT(v.deployTime||v.createTime).format("MM-DD")}]</div>
                    </div>
                </div>
            )
        })
    }

    render(){
        let st = this.state;
        let newItem = st.specialList[st.newsIdx] || {showImage:'./img/nav_top1.jpg',title:''};
        let infos = st.infos.slice(st.infosIndex,st.infosIndex+3);
        let ztzlItem = st.ztzl;
        return (
            <React.Fragment>
                <Header/>
                <CCarsousel />
                <Container className="news flr row_pd2" >
                    <div className="flbox">
                        <div className="news_area1 backgroundColor"
                             onMouseEnter={()=>this.autoMove(false)}
                             onMouseLeave={()=>this.autoMove(true)}
                        >
                            <div className="image" style={{backgroundImage:`url(${global.http(newItem.pic)})`}} onClick={()=>this.showInfo(newItem)}>
                                <div className="title">{newItem.title}</div>
                            </div>
                            <div className="btns">
                                <div className="left_btn fl-center" onClick={()=>this.showNews(-1)}>
                                    <svg t="1660361610995" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="3130" width="64" height="64">
                                        <path
                                            d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z"
                                            p-id="3131"></path>
                                    </svg>
                                </div>
                                <div className="right_btn fl-center" onClick={()=>this.showNews(1)}>
                                    <svg t="1660362086047" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="5741" width="64" height="64">
                                        <path
                                            d="M332.091514 74.487481l-75.369571 89.491197c-10.963703 12.998035-10.285251 32.864502 1.499144 44.378743l286.278095 300.375162L266.565125 819.058374c-11.338233 12.190647-11.035334 32.285311 0.638543 44.850487l80.46666 86.564541c11.680017 12.583596 30.356378 12.893658 41.662889 0.716314l377.434212-421.426145c11.332093-12.183484 11.041474-32.266891-0.657986-44.844348l-80.46666-86.564541c-1.772366-1.910513-3.706415-3.533476-5.750981-4.877077L373.270379 71.774697C361.493148 60.273758 343.054193 61.470003 332.091514 74.487481z"
                                            p-id="5742"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flone" style={{width:"465px"}}>
                        <div className="news_area2 backgroundColor">
                            <div className="flr mouseTabs">
                                {this.renderSpecialTab()}
                            </div>
                            <div className="content">
                                {this.renderList(st.specialTab)}
                            </div>
                        </div>
                    </div>
                    <div className="flone" style={{width:"280px"}}>
                        <div className="news_area2 backgroundColor">
                            <div className="flr">
                                <div className="flbox">
                                    <Tabs
                                        value={st.specialTab2}
                                        onChange={this.specialTabChange("specialTab2")}
                                        variant="scrollable"
                                        aria-label=""
                                    >
                                        <Tab label="专题专栏" />
                                    </Tabs>
                                </div>
                                <div className="flone fl-middle"
                                     style={{color:"rgb(81, 90, 110)",paddingRight:"8px",fontSize:"14px",zIndex:1}}
                                     onClick={()=>_.his.push("/group/ztzljy$ztzljs$ztzlaq$ztzlbm")}
                                >
                                    更多
                                </div>
                            </div>
                            <div className="content fl">
                                {
                                    ztzlItem.map((v,i)=>{
                                      return (
                                          <div className="flbox image" style={{backgroundImage:"url('"+v.pic+"')",backgroundSize:"cover"}} onClick={()=>_.his.push(v.content)}></div>
                                      )
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </Container>

                <Container className="infos flr row_pd1">
                    {
                        infos.map((v,i)=>{
                            let title = v.title.replace(/\<.*\/\>/g,'');
                            return (
                                <div className="item flbox backgroundColor fl"  key={i}>
                                    <div><img className="image" src={global.http(v.pic)}/></div>
                                    <article>
                                        <div className="link title" onClick={()=>this.showInfo(v)}>{title}</div>
                                        <div className="memo" dangerouslySetInnerHTML={{__html:global.httpTxt(v.content)}}></div>
                                    </article>
                                </div>
                            )
                        })
                    }
                    <div className="btns">
                        <div className="left_btn fl-center" onClick={()=>this.nextInfos(-1)}>
                            <svg t="1660361610995" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="3130" width="64" height="64">
                                <path
                                    d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z"
                                    p-id="3131"></path>
                            </svg>
                        </div>
                        <div className="right_btn fl-center" onClick={()=>this.nextInfos(+1)}>
                            <svg t="1660362086047" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5741" width="64" height="64">
                                x                <path
                                d="M332.091514 74.487481l-75.369571 89.491197c-10.963703 12.998035-10.285251 32.864502 1.499144 44.378743l286.278095 300.375162L266.565125 819.058374c-11.338233 12.190647-11.035334 32.285311 0.638543 44.850487l80.46666 86.564541c11.680017 12.583596 30.356378 12.893658 41.662889 0.716314l377.434212-421.426145c11.332093-12.183484 11.041474-32.266891-0.657986-44.844348l-80.46666-86.564541c-1.772366-1.910513-3.706415-3.533476-5.750981-4.877077L373.270379 71.774697C361.493148 60.273758 343.054193 61.470003 332.091514 74.487481z"
                                p-id="5742"></path>
                            </svg>
                        </div>
                    </div>
                </Container>
                <Footer/>
            </React.Fragment>
        )
    }
}

export default Home;

